<template>
	<view class="detail-question">
		<view class="top">
			<view class="t-block">
				<image class="cover" :src="dataObj.cover"></image>
				<view class="title ellipsis-2">{{dataObj.name}}</view>
				<!-- <view class="author ellipsis-1">课程讲师：{{dataObj.author}}</view> -->
			</view>
		</view>
		<!-- <view class="catalog">
			<view class="catalog-item" :class="pageObj.catalogIdex === idx ? 'selected' : ''" v-for="(item, idx) in pageObj.catalogs" :key="item.id" @click="onCatalogTap(idx)">{{item.title}}</view>
		</view> -->
		
		<!-- view class="question">
			<view class="block">
				<view class="header">模拟题库</view>
				<view class="table">
					<view class="th">
						<view class="td"></view>
						<view class="td title">模拟考试</view>
						<view class="td title">答案</view>
						<view class="td title">解析</view>
						<view class="td title">错题</view>
					</view>
					<view class="th">
						<view class="td title">模拟题库</view>
						<view class="td">30次</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
					</view>
					<view class="th">
						<view class="td title">解析能力</view>
						<view class="td">18次</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
					</view>
				</view>
				<view class="table">
					<view class="th">
						<view class="td"></view>
						<view class="td title">模拟考试</view>
						<view class="td title">答案</view>
						<view class="td title">解析</view>
						<view class="td title">错题</view>
					</view>
					<view class="th">
						<view class="td title">模拟题库</view>
						<view class="td">30次</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
					</view>
					<view class="th">
						<view class="td title">解析能力</view>
						<view class="td">18次</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.hook"></image>
						</view>
						<view class="td">
							<image class="state" :src="pageObj.fork"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="header">题库简介</view>
				<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
				<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
				<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
			</view>
		</view> -->
		
		<!-- 微信小程序隐藏 -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- 底部加入购物车 -->
		<footer-cart-buy
			:productId="dataObj.id"
			:price="dataObj.price"
			:type="4">
		</footer-cart-buy>
		<!-- #endif -->
	</view>
</template>

<script>
	import hook from '@/static/images/common/hook.png';
	import fork from '@/static/images/common/fork.png';
	import footerCartBuy from '@/components/footer/footer-cart-buy.vue';
	
	export default {
		components: {
			footerCartBuy
		},
		data() {
			return {
				// pageObj: {
				// 	hook: hook,
				// 	fork: fork,
				// 	// 菜单类型
				// 	catalogIdex: 0,
				// 	catalogs: [{
				// 		id: 1,
				// 		title: '模拟考试',
				// 		price: '99.00'
				// 	}, {
				// 		id: 2,
				// 		title: '3个月期限卡',
				// 		price: '199.00'
				// 	}, {
				// 		id: 3,
				// 		title: '考试专用',
				// 		price: '299.00'
				// 	}]
				// },
				dataObj: {
					id: '',
					image: '',
					title: '建筑施工行业从业人员安全培训课程与防治课…',
					author: '马会，民生，张政暗',
					price: '0'
				}
			}
		},
		onLoad(event) {
			this.dataObj = {
				id: event['id'],
				name: event['name'],
				cover: event['cover'],
				price: event['price']
			};
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		// onReady() {
		// 	this.dataObj['price'] = this.pageObj['catalogs'][0]['price'];
		// },
		methods: {
			// 菜单类型点击事件
			// onCatalogTap (index) {
			// 	this.pageObj['catalogIdex'] = index;
			// 	this.dataObj['price'] = this.pageObj['catalogs'][index]['price'];
			// }
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.detail-question {
		box-sizing: border-box;
		position: relative;
		// 头部模块
		.top {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 282rpx;
			padding-top: 60rpx;
			background-image: linear-gradient(#D9E1EF, #FFFFFF);
			.t-block {
				position: relative;
				width: 678rpx;
				height: 204rpx;
				margin: 0 auto;
				background-color: #FFFFFF;
				border-radius: 18rpx;
				box-shadow: 0 0 15rpx rgba($color: #000000, $alpha: 0.1);
				.cover {
					position: absolute;
					top: -30rpx;
					left: 30rpx;
					width: 254rpx;
					height: 156rpx;
					background-color: #eee;
					border-radius: 14rpx;
				}
				.title {
					height: 80rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #1A1A1A;
					padding: 20rpx 30rpx 45rpx 300rpx;
				}
				.author {
					line-height: 40rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					padding-left: 30rpx;
				}
			}
		}
		// 菜单
		.catalog {
			position: absolute;
			top: 282rpx;
			left: 0;
			display: flex;
			width: 100%;
			height: 80rpx;
			background-color: #FFFFFF;
			margin-bottom: 18rpx;
			
			&-item {
				flex: 1;
				position: relative;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #7F7F7F;
				text-align: center;
				&.selected{
					color: $color-common;
					font-weight: bold;
				}
				&.selected::after{
					content: '';
					display: block;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					margin-left: -16rpx;
					width: 32rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: $color-common;
				}
			}
		}
		.question{
			padding-top: 380rpx;
			padding-bottom: 100rpx;
		}
		// 模块
		.block {
			background-color: #fff;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			border-radius: 22rpx;
			&:nth-last-child(1) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.header {
				line-height: 46rpx;
				font-size: 32rpx;
				color: #1A1A1A;
			}
			// 课程简介内容
			.intro{
				line-height: 54rpx;
				font-size: 28rpx;
				color: #373737;
				padding-top: 12rpx;
			}
			.table{
				// height: 156rpx;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				margin-top: 22rpx;
				.th{
					box-sizing: border-box;
					display: flex;
					height: 52rpx;
					border-bottom: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-bottom: none;
					}
				}
				.td{
					box-sizing: border-box;
					flex: 1;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #1A1A1A;
					text-align: center;
					border-right: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-right: none;
					}
					.state{
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
				.title{
					color: #7F7F7F;
				}
			}
		}
	}
</style>
